<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dickies</title>
    <link data-n-head="true" rel="icon" type="image/x-icon" href="https://www.dickies.com.cn/app/site/statics/favicon.ico">
    <style>
        @import url(css/reset.css);
        @import url(css/header.css);
        @import url(css/login.css);
        @import url(css/footer.css);
    </style>
</head>

<body>
    <!-- 头部 -->
    <div id="header-top">
        <div class="header-con-top">
            <ul class="top">
                <li>
                    <a href="shopping.html">我的购物车<img src="img/gouwuche.png" alt=""><span>0</span></a>
                </li>
                <li>
                    <a href="#">在线客服<img src="img/xiaoxi.png" alt=""></a>
                </li>
                <li>
                    <a href="#">门店查询</a>
                </li>
                <li class="loginto">
                    <a href="Login.html" id="a1">登录</a>|<a href="#" id="a2"> 注册<img src="img/denlu.png" alt=""></a>
                </li>
                <!-- 购物车弹出框 -->
                <ul class="pop">
                    购物车中还没有商品赶紧选购吧
                    <p class="go">立即选购</p>
                </ul>

            </ul>


        </div>
    </div>
    <div id="header-center">
        <div class="header-con-center">
            <div class="center">
                <div id="onelogo">
                    <a href="Home.html"><img src="img/logo.png" alt=""></a>
                </div>
                <ul id="oneul">
                    <li id="oneli"><a href="#">全部商品</a></li>
                    <li id="oneli"><a href="#">新品</a></li>
                    <li class="man" id="oneli">
                        <a href="#">男装</a>
                        <!-- 二级导航 -->
                        <!-- 男装 -->
                        <div class="second" id="gentle">
                            <div class="second-con">
                                <ul class="second-left">
                                    <li>
                                        <a href="#">
                                            <h3>男士上装</h3>
                                            <p>薄外套</p>
                                            <p>衬衫</p>
                                            <p>短袖Polo</p>
                                            <p>短袖T桖</p>
                                            <p>卫衣</p>
                                            <p>羽绒服</p>
                                            <p>长袖T桖</p>
                                            <p>长袖衬衫</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <h3>男士下装</h3>
                                            <p>短裤</p>
                                            <p>连体装</p>
                                            <p>卫裤</p>
                                            <p>休闲裤</p>
                                            <p>长裤</p>
                                        </a>
                                    </li>
                                </ul>
                                <ul class="second-right">
                                    <li>
                                        <a href="#"><img src="img/nanzhuang1.jpg" alt="">
                                            <p>Dickies薄外套</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#"><img src="img/nanzhuang2.jpg" alt="">
                                            <p>Dickies下装</p>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>

                    </li>
                    <li class="woman" id="oneli">
                        <a href="#">女装</a>
                        <!-- 二级导航 -->
                        <!-- 女装 -->
                        <div class="second" id="lady">
                            <div class="second-con">
                                <ul class="second-left">
                                    <li>
                                        <a href="#">
                                            <h3>女士上装</h3>
                                            <p>薄外套</p>
                                            <p>衬衫</p>
                                            <p>短袖Polo</p>
                                            <p>短袖T桖</p>
                                            <p>卫衣</p>
                                            <p>羽绒服</p>
                                            <p>长袖T桖</p>
                                            <p>棉服</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <h3>女士下装</h3>
                                            <p>半身裙</p>
                                            <p>短裤</p>
                                            <p>连体装</p>
                                            <p>连衣裙</p>
                                            <p>卫裤</p>
                                            <p>休闲裤</p>
                                            <p>阔腿裤</p>
                                            <p>长裤</p>
                                        </a>
                                    </li>
                                </ul>
                                <ul class="second-right">
                                    <li>
                                        <a href="#"><img src="img/nvzhuang1.jpg" alt="">
                                            <p>Dickies卫衣</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#"><img src="img/nvzhuang2.jpg" alt="">
                                            <p>Dickies下装</p>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li id="oneli"><a href="#">情侣款</a></li>
                    <li id="oneli"><a href="#">配件</a></li>
                    <li id="oneli"><a href="#">童鞋</a></li>
                    <li id="oneli"><a href="#">品牌动态</a></li>
                </ul>
                <span>
                    <input type="text" placeholder="搜索Dickies">
                </span>

            </div>
            <ul class="opt">
                <li>热门搜索</li>
                <li>卫衣</li>
                <li>卫裤</li>
                <li>工装裤</li>
            </ul>
        </div>
    </div>
    <div class="top-buttom"></div>

    <!-- 登录页面 -->
    <div class="login">
        <div class="login-con">
            <ul>
                <li id="userlogin">用户名登录</li>
                <li id="phonelogin">手机快捷登录</li>
            </ul>
			<!-- 登录 -->
            <div class="form" id="form1">
                <div class="form-con">
                    <div class="form-input">
                        <input type="text" placeholder="请填写手机号或用户" id="userphone">
                    </div>
                    <div class="form-error" id="form-error1">
                        <i>请填写手机号或用户名</i>
                    </div>
                </div>
                <div class="form-con">
                    <div class="form-input">
                        <input type="password" placeholder="请填写密码" id="userpwd">
                    </div>
                    <div class="form-error" id="form-error2">
                        <i>请填写密码</i>
                    </div>
                </div>

                <div class="form-item">
                    <div class="forget-pwd">
                        <a href="#">忘记密码？</a>
                    </div>
                    <div class="form-button">
                        <button class="button1" id="user-btn">登录</button><button class="button2">注册</button>
                    </div>
                    <div></div>
                </div>

            </div>


            <!-- 手机快捷登录 -->
            <div class="form" id="form2">
                <div class="form-con">
                    <div class="form-input">
                        <input type="text" placeholder="手机号" id="phone">
                    </div>
                    <div class="form-c-error" id="form-c-error1">
                        <i>手机号填写错误</i>
                    </div>
                </div>
                <div class="form-con">
                    <div class="form-img">
                        <div class="form-input">
                            <input type="text" placeholder="图形验证码" id="code">
                        </div>
                        <div class="form-c-img">
                            <span id="captcha"></span>
                            <span>看不清楚？<br> 换一个</span>
                        </div>
                    </div>
                    <div class="form-c-error" id="form-c-error2">
                        <i>请输入图形验证码</i>
                    </div>
                </div>
                <div class="form-con">
                    <div class="form-img">
                        <div class="form-input">
                            <input type="text" placeholder="短信验证码" id="sms">
                        </div>
                        <p>获取验证码</p>
                    </div>
                    <div class="form-c-error" id="form-c-error3">
                        <i>请输入验证码</i>
                    </div>
                </div>

                <div class="form-item">
                    <div class="form-button">
                        <button class="button1" id="phone-btn">立即登录</button><button class="button2">注册</button>
                    </div>
                    <div></div>
                </div>

            </div>
            <div class="trust-list">
                <span>使用其他方式登录:</span>
                <a href="#">
                    <img src="https://img2.dickies.com.cn/app/sysuser/statics/images/login/weibo.png" alt="" class="img1">
                    <img src="https://img2.dickies.com.cn/app/sysuser/statics/images/login/weibo2.png" alt="" class="img2">
                </a>
                <a href="#">
                    <img src="https://img2.dickies.com.cn/app/sysuser/statics/images/login/qq.png" alt="" class="img1">
                    <img src="https://img2.dickies.com.cn/app/sysuser/statics/images/login/qq2.png" alt="" class="img2">
                </a>
                <a href="#">
                    <img src="https://img2.dickies.com.cn/app/sysuser/statics/images/login/weixin.png" alt="" class="img1">
                    <img src="https://img2.dickies.com.cn/app/sysuser/statics/images/login/weixin2.png" alt="" class="img2">
                </a>
            </div>
        </div>
    </div>


    <!-- 尾部 -->
    <div class="end">
        <div class="end-con">
            <h2><img src="img/logo.png" alt=""></h2>
            <ul>
                <li>
                    <p>在线客服<img src="img/xiaoxihong.png" alt=""></p>
                    <p>在线时间09:00-22:00</p>
                </li>
                <li>
                    <p>官方商城</p>
                    <p>全部商品</p>
                    <p>新品</p>
                    <p>男装</p>
                    <p>女装</p>
                    <p>鞋类</p>
                </li>
                <li>
                    <p>关于Dickies</p>
                    <p>品牌故事</p>
                    <p>品牌动态</p>
                </li>
                <li>
                    <p>客户服务</p>
                    <p>订购流程</p>
                    <p>如何注册</p>
                    <p>常见问题</p>
                    <p>联系我们</p>
                </li>
                <li>
                    <p>关注我们</p>
                    <p>
                        <img src="img/weibo.png" alt="">
                        <img src="img/weixin.png" alt="">
                    </p>
                </li>
            </ul>
        </div>

    </div>
    <div class="last">
        <p>
            <span>沪ICP备18048101号 ©2019 Williamson-Dickie Mfg. Co., LLC. Quality Workwear Since 1922</span>
            <span>隐私政策 安全政策</span>
        </p>
    </div>

    <!-- 侧边栏 -->
    <ul class="sider">
        <li><img src="img/xiaoxi.png" alt="">
            <p>在线客服</p>
        </li>
        <li><img src="img/xiaoxi.png" alt="">
            <p>常见问题</p>
        </li>
        <li><img src="img/left.png" alt=""></li>
    </ul>

</body>

</html>
<script src="js/jQuery.js"></script>
<script src="js/header.js"></script>
<script src="js/footer.js"></script>
<script src="js/login.js"></script>